
import classNames from 'classnames';
import { useMemo } from 'react';
import { useMediaPredicate } from 'react-media-hook';
import FormRadioGroup from 'src/component/FormRadioGroup';
import Radio from 'src/component/Radio';
import { MediaQuery } from 'src/constant/Media';
// import { BankAccount } from 'src/model/Bank';
import style from './PaymentMethodsList.module.scss';

type BankAccount = any


type Props = {
  name: string;
  bankArray: BankAccount[];
  defaultSelected?: string;
};

const PaymentMethodsList = ({ name, bankArray, defaultSelected }: Props) => {
  const isBiggerThanMd = useMediaPredicate(MediaQuery.Md);
  const defaultSelectedIndex = useMemo(() => {
    const index = bankArray.findIndex((value) => value.id === defaultSelected);

    return index >= 0 ? index : undefined;
  }, [bankArray, defaultSelected]);

  const elementMapFunction = (bankAccount: BankAccount, index: number) => (
    <div key={bankAccount.FID}>
      <div className={style.paymentRows}>
        <div className={classNames(style.radioButton, style.widthForInput)}>
          <Radio value={bankAccount.FBZh} defaultChecked={index === defaultSelectedIndex} />
        </div>
        {isBiggerThanMd && (
          <label htmlFor={bankAccount.FID} className={style.bankInfoTable}>
            <div>{bankAccount.FBHm}</div>
            <div>{bankAccount.FBMc}</div>
            <div>{bankAccount.FBZh}</div>
            <div>{bankAccount.FBSf}</div>
            <div>{bankAccount.FBCs}</div>
            <div>{bankAccount.FBFy}</div>
          </label>
        )}
        {!isBiggerThanMd && (
          <label htmlFor={bankAccount.FID} className={style.bankInfoCard}>
            <div>{bankAccount.FBHm}</div>
            <div>{bankAccount.FBMc}</div>
            <div>{bankAccount.FBZh}</div>
            <div className={style.bankLocation}>
              <div>{bankAccount.FBSf}</div>
              <div>{bankAccount.FBCs}</div>
            </div>
            <div>{bankAccount.FBFy}</div>
          </label>
        )}
      </div>
      <div className={style.divider} />
    </div>
  );

  return (
    <FormRadioGroup name={name}>
      <div>
        <div className={style.paymentColumns}>
          <div className={style.widthForInput} />
          <div className={style.textItem}>
            <span>户名</span>
            <span>银行</span>
            <span>银行帐号</span>
            <span>银行省份</span>
            <span>银行城市</span>
            <span>银行分行</span>
          </div>
        </div>
        {bankArray.map(elementMapFunction)}
      </div>
    </FormRadioGroup>
  );
};

export default PaymentMethodsList;
